<template>
  <div >
    <div class="app6">
      <!--新增弹窗-->
      <CategoryInsert></CategoryInsert>
      <!--编辑-->
       <el-dialog title="编辑分类" :visible.sync="updateDialogFormVisible">
        <el-form :model="form">
          <el-form-item label="分类名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="updateDialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateOnSubmit">确 定</el-button>
        </div>
      </el-dialog>
    </div>

     <div id = "app7">
       <el-table :data="tableData" style="width: 100%">
         <el-table-column prop="id" label="编号" width="180"></el-table-column>
       	<el-table-column prop="remark" label="分类名称" width="180"> </el-table-column>
       	<el-table-column prop="createTime" label="创建时间" width="180"> </el-table-column>
       	<el-table-column prop="updateTime" label="更新时间"  width="180"> </el-table-column>
       	<el-table-column  label="操作">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" circle @click='updateDalog(scope.row)'></el-button>
            <el-button type="danger" icon="el-icon-delete" circle @click='deleteDalog(scope.row)'></el-button>
          </template>
       	</el-table-column>

       </el-table>
    </div>
      <!--分页-->
     <el-pagination
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
         :current-page="currentPage"
         :page-sizes="[5,7,10,20,30]"
         :page-size="pageSize"
         layout="total, sizes, prev, pager, next, jumper"
         :total="totalCount">
     </el-pagination>

  </div>

</template>

<script>
  import CategoryInsert from './insertDialog.vue';


  export default{
    name:'app7',
    components:{CategoryInsert},
    data() {
    	return {
    		tableData: [],
        updateDialogFormVisible: false,
        currentPage: 1,
        pageSize: 10,
        totalCount: 0,
        form:{
          name:''
        },
        formLabelWidth: '120px',
        id:''
    	}
    },
    mounted: function () {
      this.$http({
        method:'post',
        url:'category/page',
		headers:{
		  "Authorization": sessionStorage.getItem('token')
		}
      }).then(res=>{
       var data = res.data.data.data;
       this.tableData = data;
       this.totalCount = res.data.data.totalCount;
      })
    },
    methods:{
      //分页
      getData(){
        let formData = new URLSearchParams();
        formData.append("pageIndex",this.currentPage);
        formData.append("pageSize",this.pageSize);
        // 这里使用axios，使用时请提前引入
        this.$http({
          method: 'post',
          url: '/category/page',
          headers:{
            "Authorization": sessionStorage.getItem('token')
          },
          data:formData
        }).then(reponse=>{
              // 将数据赋值给tableData
              this.tableData=reponse.data.data.data;
              // 将数据的长度赋值给totalCount
              this.totalCount=reponse.data.data.totalCount;
         })
      },
      handleSizeChange: function(val){
        this.pageSize = val;
        this.getData();
      },
      handleCurrentChange: function(val) {
        this.currentPage = val;
        this.getData()
      },
    inserOnSubmit: function () {
      let formData = new FormData()
      formData.append('name', this.form.name)
      this.$http({
        method: 'post',
        url: 'category/insert',
        headers: {
          'Authorization': sessionStorage.getItem('token')
        },
        data: formData
      }).then(res => {
        if (res.data.code === 200) {
          this.insertDialogFormVisible = false
          this.getData()
        }
      })
    },
    updateDalog: function (row) {
      this.updateDialogFormVisible = true
      this.id = row.id
      this.$http({
        method: 'get',
        url: 'category/list',
        headers: {
          'Authorization': sessionStorage.getItem('token')
        }
      }).then(res => {
        var data = res.data.data
        this.items = data
        console.info(data)
        for (var i = 0; i < data.length; i++) {
          if (row.id === data[i].id) {
            this.form.name = data[i].remark
          }
        }
      })
    },
    deleteDalog: function (row) {
      this.$confirm(
        '此操作将永久删除数据是否继续?',
        '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        this.$http({
          method: 'delete',
          url: '/category/delete?id=' + row.id,
          headers: {
            'Authorization': sessionStorage.getItem('token')
          }
        })
          .then(res => {
            if (res.data.code === 200) {
              this.$message({
                showClose: true,
                essage: '操作成功',
                type: 'success'
              })
              this.getData()
            } else {
              this.$message({
                showClose: true,
                message: '操作失败',
                type: 'success'
              })
            }
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    updateOnSubmit: function (row) {
      let formData = new FormData()
      formData.append('name', this.form.name)
      formData.append('id', this.id)
      this.$http({
        method: 'post',
        url: 'category/update',
        headers: {
          'Authorization': sessionStorage.getItem('token')
        },
        data: formData
      }).then(res => {
        if (res.data.code === 200) {
          this.updateDialogFormVisible = false
          this.$message({
            showClose: true,
            message: '操作成功',
            type: 'success'
          })
          this.getData()
        }
      })
    }
  }
}
</script>

<style>
</style>
